<!--<template>-->
<!--  <div class="container">-->
<!--    <el-form ref="stepblus" :model="stepForm" :rules="rules" label-width="120px" class="stepTwo">-->
<!--      <el-form-item label="目标来源层" prop="tarLayerID">-->
<!--        <el-select class="bule-select" v-model="stepForm.tarLayerID" placeholder="请选择" @change="getTarDatasource">-->
<!--          <el-option v-for="item in layerList" :key="item.layerId" :label="item.layerName" :value="item.layerId">-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
<!--      <el-form-item class="targetDatasourceName" label="目标数据源" prop="targetDatasourceName">-->
<!--        <el-select class="bule-select" v-model="stepForm.targetDatasourceName" placeholder="请选择" @change="getTarSchema">-->
<!--          <el-option v-for="item in tarScourceList" :key="item.id" :label="item.dbName" :value="item.id">-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--        <div class="fromItemDesc" v-if="stepForm.targetDatasourceName !== ''">-->
<!--          <span>数据库类型：{{ dbType }}</span>-->
<!--          <span style="display: block;width: 100%;word-wrap: break-word;margin: 10px 0 0 0;">IP：{{connectionParams}}</span>-->
<!--        </div>-->
<!--      </el-form-item>-->
<!--      <el-form-item class="tarSchemaName" label="分区" v-if="this.stepForm.targetDatasourceName == 26">-->
<!--        <el-input type="text" :rows="16" placeholder="请填写分区信息" v-model="sqlmsg">-->
<!--        </el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item class="tarSchemaName" label="目标schema名" prop="tarSchemaName">-->
<!--        <el-select class="bule-select" v-model="stepForm.tarSchemaName" placeholder="请选择" @change="getSrcTableName">-->
<!--          <el-option v-for="item in tarSchemaList" :key="item" :label="item" :value="item">-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="目标数据表" prop="tarTableName">-->
<!--        <el-select class="bule-select" v-model="stepForm.tarTableName" placeholder="请选择">-->
<!--          <el-option v-for="item in tarTableList" :key="item.TABLE_NAME" :label="item.TABLE_NAME"-->
<!--                     :value="item.TABLE_NAME">-->
<!--            <div class="tabledesc">-->
<!--              <span>{{ item.TABLE_NAME }}</span>{{ item.TABLE_COMMENT || "" }}-->
<!--            </div>-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--        <el-button type="primary" size="mini" class="sx-button-states-table" @click="createTableshow">生成目标表</el-button>-->
<!--      </el-form-item>-->
<!--      &lt;!&ndash;      <el-form-item label="唯一字段">&ndash;&gt;-->
<!--      &lt;!&ndash;        <el-select class="bule-select" v-model="stepForm.onlySelectfield" placeholder="请选择">&ndash;&gt;-->
<!--      &lt;!&ndash;          <el-option v-for="item in onlyFieldList" :key="item.name" :label="item.name" :value="item.name">&ndash;&gt;-->
<!--      &lt;!&ndash;          </el-option>&ndash;&gt;-->
<!--      &lt;!&ndash;        </el-select>&ndash;&gt;-->
<!--      &lt;!&ndash;      </el-form-item>&ndash;&gt;-->
<!--      <el-form-item label="写入模式" prop="wirteMode">-->
<!--        <el-radio-group v-model="stepForm.wirteMode">-->
<!--          <el-radio label="OVERWRITE">覆盖</el-radio>-->
<!--          <el-radio label="APPEND">追加</el-radio>-->
<!--        </el-radio-group>-->
<!--      </el-form-item>-->
<!--    </el-form>-->

<!--    &lt;!&ndash; 生成目录表 &ndash;&gt;-->
<!--    <el-dialog title="建表语句" width="850px" :visible.sync="dialogTableVisible" class="mask">-->
<!--      <el-input type="textarea" :rows="16" placeholder="请输入内容" v-model="sqlmsg">-->
<!--      </el-input>-->
<!--      <div slot="footer" class="dialog-footer">-->
<!--        <div class="sx-button-states" @click="dialogTableVisible = false">-->
<!--          取消-->
<!--        </div>-->
<!--        <div class="sx-button-statesprimary" @click="createTable">确定</div>-->
<!--      </div>-->
<!--    </el-dialog>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--// import {getDataSourceOrigin, listDbLayer} from "@/api/integration/itgdblayer";-->
<!--import {genTargetTable, getDataSchema, getDataSource} from "@/api/integration/metadata";-->

<!--export default {-->
<!--  data() {-->
<!--    return {-->
<!--      layerList: [], // 获取分层-->
<!--      tarScourceList: [], // 获取目标数据源-->
<!--      tarTableList: [], // 获取目标数据表-->
<!--      onlySelectfield: "", // 唯一字段-->
<!--      onlyFieldList: [], // 获取唯一字段-->
<!--      tarSchemaList: [],-->
<!--      incScourceType: "", // 原始数据源类型-->
<!--      incScourceIp: "", // 原始数据源类型-->
<!--      stepForm: {-->
<!--        tarLayerID: "",-->
<!--        tarSchemaName: "",-->
<!--        targetDatasourceName: "",-->
<!--        targetDatasourceId: "",-->
<!--        tarTableName: "",-->
<!--        onlySelectfield: '',-->
<!--        wirteMode: 'OVERWRITE'-->
<!--      },-->
<!--      tablesql: '',-->
<!--      dialogTableVisible: false,-->
<!--      sqlmsg: '',-->
<!--      dbType: '',//数据库类型-->
<!--      connectionParams: '',//数据库IP-->
<!--      rules: {-->
<!--        tarLayerID: [-->
<!--          {required: true, message: '请选择数据来源层', trigger: 'change'}-->
<!--        ],-->
<!--        targetDatasourceName: [-->
<!--          {required: true, message: '请选择原始数据源', trigger: 'change'}-->
<!--        ],-->
<!--        tarTableName: [-->
<!--          {required: true, message: '请选择原始数据表', trigger: 'change'}-->
<!--        ],-->
<!--        wirteMode: [-->
<!--          {required: true, message: '请选择写入模式', trigger: 'blur'}-->
<!--        ],-->
<!--        tarSchemaName: [-->
<!--          {required: true, message: '请选择schema名', trigger: 'blur'}-->
<!--        ]-->
<!--      }-->
<!--    };-->
<!--  },-->
<!--  watch: {-->
<!--    // eslint-disable-next-line func-names-->
<!--    'stepForm.tarTableName': function (newval, oldval) {-->
<!--      // 监听数据变化-->
<!--      if (oldval) {-->
<!--        if (sessionStorage.getItem('step0') && newval !== oldval) {-->
<!--          sessionStorage.setItem('filedstatus', true)-->
<!--          sessionStorage.removeItem('constList')-->
<!--        }-->
<!--      }-->
<!--    }-->
<!--  },-->
<!--  async created() {-->
<!--    // 获取数据层数据-->
<!--    const layer = await listDbLayer();-->
<!--    this.layerList = layer.rows;-->

<!--    // 判断是否有存储值-->
<!--    const stepdata = sessionStorage.getItem('step1')-->
<!--    if (stepdata) {-->
<!--      this.stepForm = JSON.parse(stepdata)-->
<!--      // 获取数据源-->
<!--      // this.tarScourceList = [];-->
<!--      const scource = await getDataSource(this.stepForm.tarLayerID);-->
<!--      this.tarScourceList = scource.data;-->
<!--      sessionStorage.setItem('tarScourceList', JSON.stringify(scource.data))-->

<!--      // 获取schema-->
<!--      const schemaData = await getDataSchema({datasourceId: JSON.parse(sessionStorage.getItem('targetDatasourceId'))});-->
<!--      this.tarSchemaList = schemaData.data;-->
<!--      sessionStorage.setItem('tarSchemaList', JSON.stringify(schemaData.data))-->

<!--      //获取表-->
<!--      const tableData = await getDataSource({-->
<!--        datasourceId: JSON.parse(sessionStorage.getItem('targetDatasourceId')),-->
<!--        tableSchema: this.stepForm.tarSchemaName,-->
<!--      });-->
<!--      this.tarTableList = tableData.data;-->
<!--      sessionStorage.setItem('tarTableList', JSON.stringify(tableData.data))-->


<!--      // // 获取数据表-->
<!--      // this.incScourceType = this.tarScourceList.filter(-->
<!--      //   (item) => item.id === this.stepForm.targetDatasourceName-->
<!--      // )[0].type;-->
<!--      // this.incScourceIp = this.tarScourceList.filter(-->
<!--      //   (item) => item.id === this.stepForm.targetDatasourceName-->
<!--      // )[0].config.hostname;-->
<!--      // const table = await getDataTable({-->
<!--      //   datasourceId: this.stepForm.targetDatasourceName,-->
<!--      // });-->
<!--      // this.tarTableList = table.data.data.data;-->

<!--      // sessionStorage.setItem('tarTableList', JSON.stringify(this.tarTableList))-->

<!--      // this.onlyFieldList = [];-->
<!--      // const data = await getColumns({-->
<!--      //   datasourceId: this.stepForm.targetDatasourceName,-->
<!--      //   tableName: this.stepForm.tarTableName,-->
<!--      // });-->
<!--      // this.onlyFieldList = data.data.data.data.columns;-->
<!--    }-->
<!--  },-->
<!--  methods: {-->
<!--    // 获取目标数据源val-->
<!--    async getTarDatasource(val) {-->
<!--      this.stepForm.targetDatasourceName = ''-->
<!--      // getDataSourceOrigin(this.stepForm.tarLayerID).then(response => {-->
<!--      //   this.tarScourceList = response.data;-->
<!--      //   sessionStorage.setItem('tarScourceList', JSON.stringify(response.data))-->
<!--      // })-->
<!--    },-->
<!--    // 获取schema名-->
<!--    async getTarSchema(val) {-->
<!--      sessionStorage.setItem('targetDatasourceId', val)-->
<!--      getDataSchema({datasourceId: JSON.parse(sessionStorage.getItem('targetDatasourceId'))}).then(response => {-->
<!--        this.tarSchemaList = response.data;-->
<!--        sessionStorage.setItem('tarSchemaList', JSON.stringify(response.data))-->
<!--      })-->


<!--      let obj = {};-->
<!--      obj = this.tarScourceList.find(item => {-->
<!--        return item.id === val;-->
<!--      })-->
<!--      this.dbType = obj.dbType;-->
<!--      this.connectionParams = obj.connectionParams;-->

<!--      sessionStorage.setItem('dbType', JSON.stringify(obj.dbType))-->
<!--      sessionStorage.setItem('connectionParams', JSON.stringify(obj.connectionParams))-->

<!--      this.stepForm.targetDatasourceName = obj.dbName;-->
<!--      this.stepForm.targetDatasourceId = obj.id;-->
<!--      console.log(obj)-->

<!--      const tarScourceListTwo = this.tarScourceList-->
<!--      sessionStorage.setItem('tarScourceListTwo', JSON.stringify(this.tarScourceList))-->
<!--      console.log(tarScourceListTwo)-->




<!--    },-->
<!--    // 获取原始数据表-->
<!--    async getSrcTableName(val) {-->
<!--      const data = await getDataSource({-->
<!--        datasourceId: JSON.parse(sessionStorage.getItem('targetDatasourceId')),-->
<!--        tableSchema: this.stepForm.tarSchemaName,-->
<!--      });-->
<!--      this.tarTableList = data.data;-->
<!--      // sessionStorage.setItem('tarTableList', JSON.stringify(this.tarTableList))-->
<!--    },-->
<!--    async getIncFiled(val) {-->
<!--      this.stepForm.onlySelectfield = "";-->
<!--      this.onlyFieldList = [];-->
<!--      const data = await getColumns({-->
<!--        datasourceId: JSON.parse(sessionStorage.getItem('targetDatasourceId')),-->
<!--        tableSchema: this.stepForm.tarSchemaName,-->
<!--        tableName: this.stepForm.tarTableName,-->
<!--      });-->
<!--      this.onlyFieldList = data.data.columns;-->
<!--      sessionStorage.setItem('onlyFieldList', JSON.stringify(data.data.columns))-->
<!--    },-->
<!--    // eslint-disable-next-line consistent-return-->
<!--    async createTableshow() {-->
<!--      const data = await genTargetTable({-->
<!--        datasourceId: JSON.parse(sessionStorage.getItem('step0')).srcDatasourceId,-->
<!--        srcTableName: JSON.parse(sessionStorage.getItem('step0')).srcTableName,-->
<!--        tarDatasourceId: JSON.parse(sessionStorage.getItem('targetDatasourceId')),-->
<!--        tarTableName: this.stepForm.tarTableName,-->
<!--        srcSchemaName: JSON.parse(sessionStorage.getItem('step0')).srcSchemaName,-->
<!--        tarSchemaName: this.stepForm.tarSchemaName,-->
<!--      })-->
<!--      if (!data.data.success) {-->
<!--        return false-->
<!--      }-->
<!--      this.sqlmsg = data.data.data.msg-->
<!--      sessionStorage.setItem('sqlmsg', data.data.data.msg)-->
<!--      this.dialogTableVisible = true-->
<!--    },-->
<!--    // eslint-disable-next-line consistent-return-->
<!--    async createTable() {-->
<!--      if (sessionStorage.getItem('sqlmsg') === '目标表已存在') {-->
<!--        this.$message.warning('目标表已存在')-->
<!--        return false-->
<!--      }-->
<!--      const sqldata = await executeGenSql({-->
<!--        datasourceId: this.stepForm.targetDatasourceName,-->
<!--        tableSql: sessionStorage.getItem('sqlmsg')-->
<!--      })-->
<!--      if (!sqldata.data.success) {-->
<!--        this.isload = false-->
<!--        return false-->
<!--      }-->
<!--    }-->

<!--  },-->
<!--};-->
<!--</script>-->


<!--<style lang="scss" scoped>-->
<!--.blue-input {-->
<!--  .el-input__inner {-->
<!--    width: 560px;-->
<!--    height: 30px;-->
<!--    background: #ffffff;-->
<!--    border-radius: 3px;-->
<!--    line-height: 30px;-->
<!--    box-shadow: 0px 1px 1px 0px rgba(16, 22, 26, 0.2) inset,-->
<!--    0px 0px 0px 1px rgba(16, 22, 26, 0.15) inset;-->
<!--  }-->
<!--}-->

<!--.bule-select {-->
<!--  .el-input__inner {-->
<!--    background: #f5f8fa;-->
<!--    border-radius: 3px;-->
<!--    box-shadow: 0px 0px 0px 1px rgba(16, 22, 26, 0.2) inset,-->
<!--    0px -1px 1px 0px rgba(16, 22, 26, 0.1) inset;-->
<!--    height: 30px;-->
<!--    width: 560px;-->
<!--    line-height: 30px;-->
<!--  }-->

<!--  .el-input__icon {-->
<!--    line-height: 30px;-->
<!--  }-->
<!--}-->

<!--.el-textarea__inner {-->
<!--  width: 560px;-->
<!--}-->

<!--.rule-item-operate {-->
<!--  // position: absolute;-->
<!--  // left: 950px;-->
<!--  // top: calc(50% - 30px);-->
<!--  // min-height: 60px;-->
<!--  // padding: 15px 30px;-->
<!--  display: flex;-->
<!--  align-items: center;-->

<!--  .el-icon-circle-plus {-->
<!--    // position: absolute;-->
<!--    // left: 0;-->
<!--    // top: 0;-->
<!--    cursor: pointer;-->
<!--    font-size: 20px;-->
<!--    //color: $primary;-->
<!--    margin: 0 10px;-->
<!--  }-->

<!--  .el-icon-remove {-->
<!--    // position: absolute;-->
<!--    // left: 0;-->
<!--    // bottom: 0;-->
<!--    cursor: pointer;-->
<!--    font-size: 20px;-->
<!--    //color: $danger;-->
<!--    margin: 0 10px;-->
<!--  }-->
<!--}-->

<!--.routeItem {-->
<!--  display: flex;-->
<!--}-->

<!--.el-form-item {-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  margin-bottom: 20px;-->

<!--  .sx-button-statesprimary {-->
<!--    margin-left: 0;-->
<!--    margin-top: 20px;-->
<!--  }-->
<!--}-->

<!--.srcDatasour {-->
<!--  .el-form-item__content {-->
<!--    width: 560px;-->
<!--    flex-direction: column;-->
<!--  }-->
<!--}-->

<!--.el-form-item__content {-->
<!--  margin: 0 !important;-->
<!--  line-height: 0;-->
<!--  display: flex;-->
<!--  // flex-direction: column;-->
<!--}-->

<!--.el-form-item__label {-->
<!--  text-align: left;-->
<!--  line-height: 20px !important;-->
<!--  margin-bottom: 5px;-->
<!--}-->

<!--.routeBox {-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--}-->

<!--.originalData {-->
<!--  display: flex;-->
<!--  flex-direction: column;-->

<!--  .fromitemdesc {-->
<!--    font-size: 12px;-->
<!--    color: #5c7080;-->
<!--    line-height: 20px;-->
<!--    margin-bottom: 5px;-->
<!--  }-->
<!--}-->

<!--.targetData {-->
<!--  width: 720px;-->
<!--  height: 240px;-->
<!--  opacity: 1;-->
<!--  background: #ffffff;-->
<!--  border: 1px solid rgba(24, 32, 38, 0.2);-->
<!--  border-radius: 5px;-->
<!--  margin-bottom: 5px;-->
<!--  padding: 10px 20px;-->
<!--  margin-top: 10px;-->
<!--}-->

<!--.stepTwo {-->
<!--  position: relative;-->
<!--  margin: 40px auto 0;-->
<!--  border: 1px dashed #e9e9e9;-->
<!--  border-radius: 6px;-->
<!--  background-color: #FAFAFA;-->
<!--  min-height: 200px;-->
<!--  padding: 40px;-->
<!--  min-width: 770px;-->
<!--  width: 76%;-->
<!--}-->

<!--.el-form-item {-->
<!--  display: inherit;-->
<!--  margin-bottom: 15px;-->

<!--  .el-form-item__label {-->
<!--    text-align: left;-->
<!--  }-->
<!--}-->

<!--.fromItemDesc {-->
<!--  line-height: 1;-->
<!--  color: #5c7080;-->
<!--  font-size: 12px;-->
<!--  margin-top: 5px;-->
<!--}-->

<!--.tabledesc {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  justify-content: space-between;-->
<!--}-->

<!--.container {-->
<!--  position: relative;-->
<!--  // border: 1px solid red;-->
<!--  padding: 20px 20px 20px 20px;-->
<!--  box-sizing: border-box;-->
<!--}-->

<!--.sideShow {-->
<!--  position: absolute;-->
<!--  height: 100%;-->
<!--  width: 0px;-->
<!--  right: 10px;-->
<!--  top: 0;-->
<!--  background: #ffffff;-->
<!--  border: 1px solid #cccdcf;-->
<!--  // border-radius: 5px;-->
<!--}-->

<!--.sideHeader {-->
<!--  height: 40px;-->
<!--  padding: 0 20px;-->
<!--  font-size: 14px;-->
<!--  color: #5c7080;-->
<!--  line-height: 40px;-->
<!--  box-shadow: 0px -1px 0px 0px #cccdcf inset;-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  justify-content: space-between;-->
<!--}-->

<!--.testwidth {-->
<!--  width: 800px;-->
<!--  transition: width 0.5s ease;-->
<!--}-->

<!--.tablebox {-->
<!--  padding: 10px;-->
<!--  overflow: auto;-->
<!--}-->

<!--.el-input, .el-select, .el-textarea {-->
<!--  width: 70%;-->
<!--}-->

<!--.sx-button-states-table {-->
<!--  display: inline-flex;-->
<!--  margin: 0 20px;-->
<!--}-->
<!--</style>-->
